import React, {Component} from 'react';
import $ from 'jquery';
import './App.css';
import {Select,Spin,Button, Input, Collapse, Card, Row, Col, Modal,Tabs} from 'antd';
const Panel = Collapse.Panel;
const { Option } = Select;
const TabPane = Tabs.TabPane;

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            spinning: false,
            canCreate: true,
            projectName: null,
            tomcatPort: null,
            dubboPort: null,
            gitPath: null,
            owner: null,
            branch: null,
            profile: null,
            moduleName: null,
            finalName: null,
            projectList: [],
            frontProjectName: null,
            frontGitPath: null,
            frontLocalAddress: null,
            frontBranch: null,
            frontOwner: null,
            frontProjectList: [],
            version: null,
            endVersionConfig: [
                {
                    "location": "~ ^/data",
                },
                {
                    "location": "~ ^/trade",
                },
                {
                    "location": "~ ^/product",
                },
                {
                    "location": "~ ^/kefu",
                },
                {
                    "location": "~ /",
                    "project": "overseas-erp-usercenter-dev"
                }
            ],
            frontVersion:null,
            frontStaticVersion:null,
            versionList:[],
            currentVersion:null,
            projects:[],
            branches:[],
            editVisible:false,
            publishProjectName:'',
            showPublishInfo:false
        }


    }

    componentWillMount() {
        this.loadData()
    }

    fetch = (url, data, callback, errorCallback) => {
        this.setState({spinning: true})
        $.post(url, data, (res) => {
            console.log(res);
            if (res.success) {
                this.setState({spinning: false})
                callback(res.data)

            } else {
                this.setState({spinning: false})
                Modal.error({content: res.errorMsg});
                errorCallback(res);

            }
        }, 'json');
    }
    saveVersion(){
        this.fetch("/version/add.json", {
            versionName: this.state.version,
            frontProjectInfo: this.state.frontVersion+';'+this.state.frontStaticVersion,
            endProjectInfo: JSON.stringify(this.state.endVersionConfig),
        }, (data) => {
            this.loadData();
            Modal.success({content: data});
        })
    }
    updateVersion(){
        this.fetch("/version/edit.json", {
            versionName: this.state.version,
            frontProjectInfo: this.state.frontVersion+';'+this.state.frontStaticVersion,
            endProjectInfo: JSON.stringify(this.state.endVersionConfig),
        }, (data) => {
            this.loadData();
            this.setState({editVisible:false});
            Modal.success({content: data});
        })
    }

    reloadOpenresty(){
        this.fetch("/version/reload.json", {}, (data) => {
            this.loadData();
            Modal.success({content: data});
        })
    }
    createNewFront() {
        this.fetch("/front/init.json", {
            projectName: this.state.frontProjectName,
            owner: this.state.frontOwner,
            gitPath: this.state.frontGitPath,
            branch:this.state.frontBranch,
            localAddress:this.state.frontLocalAddress
        }, (data) => {
            this.loadData();
            Modal.success({content: data});
        })
    }

    edit(v){
        this.setState({editVisible:true,version:v});
    }

    updateFront(projectName) {
        this.fetch("/front/publish.json", {
            projectName: projectName,
        }, (data) => {
            this.loadData();
            Modal.success({content: data});
        })
    }
    deleteFront(projectName) {
        this.fetch("/front/delete.json", {
            projectName: projectName,
        }, (data) => {
            this.setState({canCreate: true});
            this.loadData();
            Modal.success({content: data});
        })
    }
    createNew() {
        this.fetch("/end/init.json", {
            projectName: this.state.projectName,
            dubboPort: this.state.dubboPort,
            tomcatPort: this.state.tomcatPort,
            owner: this.state.owner,
            gitPath: this.state.gitPath,
            branch:this.state.branch,
            profile:this.state.profile,
            moduleName:this.state.moduleName,
            finalName:this.state.finalName
        }, (data) => {
            this.loadData();
            Modal.success({content: data});
        })
    }
    delete(projectName) {
        this.fetch("/end/removeProject.json", {
            projectName: projectName,
        }, (data) => {
            this.setState({canCreate: true});
            this.loadData();
            Modal.success({content: data});
        })
    }
    deleteVersion(versionName) {
        this.fetch("/version/delete.json", {
            versionName: versionName,
        }, (data) => {
            this.setState({canCreate: true});
            this.loadData();
            Modal.success({content: data});
        })
    }


    setCookie(versionName) {
        this.fetch("/version/setVersion.json", {
            versionName: versionName,
        }, (data) => {
            this.setState({canCreate: true});
            this.loadData();
            Modal.success({content: data});
        })
    }

    publish(projectName) {
        this.setState({showPublishInfo:true,publishProjectName:projectName})

    }
    restart(projectName) {
        this.fetch("/end/restart.json", {
            projectName: projectName,
        }, (data) => {
            this.setState({canCreate: true});
            this.loadData();
            Modal.success({content: data});
        })
    }
    stop(projectName) {
        this.fetch("/end/shutdown.json", {
            projectName: projectName,
        }, (data) => {
            this.setState({canCreate: true});
            this.loadData();
            Modal.success({content: data});
        })
    }

    loadData() {
        this.fetch('/end/projectList.json', {}, (data) => {
            this.setState({
                projectList: data
            })
        })
        this.fetch('/front/projectList.json', {}, (data) => {
            this.setState({
                frontProjectList: data
            })
        })
        this.fetch('/version/list.json', {}, (data) => {
            this.setState({
                versionList: data
            })
        })
        this.fetch("/version/current.json", {
        }, (data) => {
            this.setState({currentVersion: data});
        })
        this.fetch("/common/projects.json", {
        }, (data) => {
            this.setState({projects: data});
        })
    }

    getBranches(id){
        this.fetch("/common/branches.json", {id:id}, (data) => {
            this.setState({branches: data});
        })
    }
    render() {
        return (
            <div>

                <Spin tip="执行中..." spinning={this.state.spinning}>
                <Tabs defaultActiveKey={'6'}>
                    <TabPane tab="新建后端项目" key="1">
                        <Card title="初始化一个项目发布目录 新项目请确保项目git上的develop权限已经分享给闾铎了">
                            <Row>
                                <Col span={2}>项目名称</Col><Col span={22}> <Input placeholder="overseas-erp-usercenter"
                                                                               value={this.state.projectName}
                                                                               onChange={(e) => this.setState({projectName: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>Tomcat端口号</Col><Col span={22}> <Input placeholder="11111 注意不要与已有端口号重复"
                                                                                    value={this.state.tomcatPort}
                                                                                    onChange={(e) => this.setState({tomcatPort: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>Dubbo端口号</Col><Col span={22}> <Input placeholder="11111 注意不要与已有端口号重复"
                                                                                   value={this.state.dubboPort}
                                                                                   onChange={(e) => this.setState({dubboPort: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>项目负责人</Col><Col span={22}> <Input placeholder="donar"
                                                                                value={this.state.owner}
                                                                                onChange={(e) => this.setState({owner: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>项目Git地址</Col>
                                <Col span={10}><Select style={{width:600}}
                                    onChange={(value)=>{value = JSON.parse(value);this.setState({gitPath:value.url});this.getBranches(value.id)}}>
                                    {
                                        this.state.projects.map((item,i)=>{
                                            return  <Option value={JSON.stringify({url:item.ssh_url_to_repo,id:item.id})}>{item.name}</Option>
                                        })
                                    }
                                </Select>
                                </Col>
                                <Col span={12}>
                                    <Input disabled={true} value={this.state.gitPath}
                                onChange={(e) => this.setState({gitPath: e.target.value})}/>
                                </Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>模块名称</Col><Col span={22}> <Input
                                placeholder="overseas-erp-web" value={this.state.moduleName}
                                onChange={(e) => this.setState({moduleName: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>FINAL_NAME</Col><Col span={22}> <Input
                                placeholder="overseas-erp-web" value={this.state.finalName}
                                onChange={(e) => this.setState({finalName: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>分支</Col>
                                <Col span={22}><Select style={{width:600}}
                                                       onChange={(value)=>{this.setState({branch:value})}}>
                                    {
                                        this.state.branches.map((item,i)=>{
                                            return  <Option value={item.name}>{item.name}</Option>
                                        })
                                    }
                                </Select>
                                </Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>编译参数</Col><Col span={22}> <Input
                                placeholder="dev" value={this.state.profile}
                                onChange={(e) => this.setState({profile: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col offset={22}><Button type="primary" onClick={() => this.createNew()}
                                                         loading={!this.state.canCreate}>提交</Button></Col>
                            </Row>

                        </Card>
                    </TabPane>
                    <TabPane tab="后端项目列表" key="2">

                        <Card title="项目列表">
                            <div>
                                <Row>
                                    <Col span={3}>名称</Col>
                                    <Col span={1}>负责人</Col>
                                    <Col span={1}>Tomcat</Col>
                                    <Col span={1}>Dubbo</Col>
                                    <Col span={1}>状态</Col>
                                    <Col span={5}>git地址</Col>
                                    <Col span={3}>模块名称</Col>
                                    <Col span={3}>FINAL_NAME</Col>
                                    <Col span={2}>branch</Col>
                                    <Col span={2}>profile</Col>
                                    <Col span={2}>操作</Col>
                                </Row>
                                <br/>
                                <hr/>
                                {
                                    this.state.projectList.map((item,i)=> {
                                        return (
                                            <div>
                                                <br/><br/>
                                                <Row>
                                                    <Col span={3}>{item.projectName}</Col>
                                                    <Col span={1}>{item.owner}</Col>
                                                    <Col span={1}>{item.tomcatPort}</Col>
                                                    <Col span={1}>{item.dubboPort}</Col>
                                                    <Col span={1}>{item.status}</Col>
                                                    <Col span={5}>{item.gitPath}</Col>
                                                    <Col span={3}>{item.moduleName}</Col>
                                                    <Col span={3}>{item.finalName}</Col>
                                                    <Col span={2}>{item.branch}</Col>
                                                    <Col span={2}>{item.profile}</Col>
                                                    <Col span={2}>
                                                        <Button onClick={()=>this.publish(item.projectName)}>发布</Button>
                                                        <Button onClick={()=>this.restart(item.projectName)}>重启</Button>
                                                        <Button onClick={()=>this.stop(item.projectName)}>停止</Button>
                                                        <Button type="danger" onClick={()=>this.delete(item.projectName)}>删除</Button>
                                                    </Col>
                                                </Row>
                                            </div>
                                        );
                                    })
                                }
                                <br/>

                            </div>
                        </Card>

                    </TabPane>
                    <TabPane tab="新建前端项目" key="3">
                        {/*frontProjectName:null,*/}
                        {/*frontGitPath:null,*/}
                        {/*frontLocalAddress:null,*/}
                        {/*frontBranch:null,*/}
                        {/*frontOwner:null,*/}
                        {/*frontProjectList:[],*/}
                        <Card title="初始化一个项目发布目录 新项目请确保项目git上的develop权限已经分享给闾铎了">
                            <Row>
                                <Col span={2}>项目名称</Col><Col span={22}> <Input placeholder="overseas-erp-usercenter"
                                                                               value={this.state.frontProjectName}
                                                                               onChange={(e) => this.setState({frontProjectName: e.target.value})}/></Col>
                            </Row>
                            <br/>


                            <Row>
                                <Col span={2}>项目负责人</Col><Col span={22}> <Input placeholder="donar"
                                                                                value={this.state.frontOwner}
                                                                                onChange={(e) => this.setState({frontOwner: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>项目Git地址</Col>
                                <Col span={10}><Select style={{width:600}}
                                                       onChange={(value)=>{value = JSON.parse(value);this.setState({frontGitPath:value.url});this.getBranches(value.id)}}>
                                    {
                                        this.state.projects.map((item,i)=>{
                                            return  <Option value={JSON.stringify({url:item.ssh_url_to_repo,id:item.id})}>{item.name}</Option>
                                        })
                                    }
                                </Select>
                                </Col>
                                <Col span={12}>
                                    <Input disabled={true} value={this.state.frontGitPath}
                                           onChange={(e) => this.setState({frontGitPath: e.target.value})}/>
                                </Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>分支</Col>
                                <Select style={{width:600}}
                                        onChange={(value)=>{this.setState({frontBranch:value})}}>
                                    {
                                        this.state.branches.map((item,i)=>{
                                            return  <Option value={item.name}>{item.name}</Option>
                                        })
                                    }
                                </Select>
                            </Row>
                            <br/>
                            <Row>
                                <Col span={2}>联调地址</Col><Col span={22}> <Input
                                placeholder="http://192.168.50.26:8888" value={this.state.frontLocalAddress}
                                onChange={(e) => this.setState({frontLocalAddress: e.target.value})}/></Col>
                            </Row>
                            <br/>
                            <Row>
                                <Col offset={22}><Button type="primary" onClick={() => this.createNewFront()}
                                                         loading={!this.state.canCreate}>提交</Button></Col>
                            </Row>


                        </Card>
                    </TabPane>
                    <TabPane tab="前端项目列表" key="4">

                        <Card title="项目列表">
                            <div>
                                <Row>
                                    <Col span={4}>名称</Col>
                                    <Col span={4}>负责人</Col>
                                    <Col span={8}>git地址</Col>
                                    <Col span={4}>branch</Col>
                                    {/*<Col span={4}>联调地址</Col>*/}
                                    <Col span={4}>操作</Col>
                                </Row>
                                <br/>
                                <hr/>
                                {
                                    this.state.frontProjectList.map((item,i)=> {
                                        return (
                                            <div>
                                                <br/><br/>
                                                <Row>
                                                    <Col span={4}>{item.projectName}</Col>
                                                    <Col span={4}>{item.owner}</Col>
                                                    <Col span={8}>{item.gitPath}</Col>
                                                    <Col span={4}>{item.branch}</Col>
                                                    {/*<Col span={4}>{item.localAddress}</Col>*/}
                                                    <Col span={4}>
                                                        <Button onClick={()=>this.updateFront(item.projectName)}>更新</Button>
                                                        <Button type="danger" onClick={()=>this.deleteFront(item.projectName)}>删除</Button>
                                                    </Col>
                                                </Row>
                                            </div>
                                        );
                                    })
                                }
                                <br/>

                            </div>
                        </Card>

                    </TabPane>

                    <TabPane tab="新建版本" key="5">

                        <Card title="规则配置">
                            <div>
                                <span>版本号</span><br/><br/>
                                <Input placeholder="versionname" style={{ width: 400 }}
                                       value={this.state.version}
                                       onChange={(e) => this.setState({version: e.target.value})}/><br/><br/>
                                <span>前端版本</span><br/><br/> overseas <Select
                                    style={{ width: 400 }}
                                    onChange={(value)=>{this.setState({frontVersion:value})}}>
                                {
                                    this.state.frontProjectList.map((item,i)=>{
                                        return  <Option value={item.projectName}>{item.projectName}</Option>
                                    })
                                }
                                </Select> static <Select
                                style={{ width: 400 }}
                                onChange={(value)=>{this.setState({frontStaticVersion:value})}}>
                                {
                                    this.state.frontProjectList.map((item,i)=>{
                                        return  <Option value={item.projectName}>{item.projectName}</Option>
                                    })
                                }
                            </Select><br/><br/>
                                <span>后端规则</span>
                                {this.state.endVersionConfig.map((config,i)=>{
                                    return (
                                        <Row>
                                        <Input style={{ width: 400 }} placeholder="^ /trade" defaultValue={this.state.endVersionConfig[i].location} onChange={(e) => {
                                            var temp = this.state.endVersionConfig
                                            temp[i].location=e.target.value
                                            this.setState({endVersionConfig:temp})
                                        }}/>
                                        <Select
                                            style={{ width: 400 }}
                                            onChange={(value)=>{
                                                var temp = this.state.endVersionConfig
                                                temp[i].project=value
                                                this.setState({endVersionConfig:temp})
                                            }}>
                                            <Option value="">填写proxyPath</Option>
                                            {
                                                this.state.projectList.map((item,i)=>{
                                                    return <Option value={item.projectName}>{item.projectName}</Option>
                                                })
                                            }
                                        </Select>
                                        <Input style={{ width: 400 }} placeholder="http://121.199.170.10:80" onChange={(e) => {
                                            var temp = this.state.endVersionConfig
                                            temp[i].proxyPath=e.target.value
                                            this.setState({endVersionConfig:temp})
                                        }}/>
                                        </Row>
                                    )
                                })}
                                <Row><Button onClick={()=>{
                                    var temp = this.state.endVersionConfig
                                    temp.push({})
                                    this.setState({endVersionConfig:temp})
                                }}>+</Button> <Button onClick={()=>this.saveVersion()
                                }>保存</Button></Row>
                            </div>
                        </Card>
                    </TabPane>

                    <TabPane tab="版本列表" key="6">

                        <Card title={"current version " + this.state.currentVersion}>
                            <div>
                                <br/>
                                <Row>
                                    <Button type="primary" onClick={()=>this.reloadOpenresty()}>Openresty Reload</Button> <br/>
                                    <h1>新建版本或者修改版本配置后记得reload openresty 500 的错一般就是没有选择版本或者没有reload</h1>
                                </Row>
                                <Row>
                                    <Col span={4}>版本号</Col>
                                    <Col span={4}>前端项目</Col>
                                    <Col span={12}>后端配置</Col>
                                    <Col span={4}>操作</Col>
                                </Row>
                                <br/>
                                <hr/>
                                {
                                    this.state.versionList.map((item,i)=> {
                                        return (
                                            <div>
                                                <br/><br/>
                                                <Row style={{ border:5 }}>
                                                    <Col span={4}>{item.versionId}</Col>
                                                    <Col span={4}>{item.frontProjectsInfo}</Col>
                                                    <Col span={12}>{
                                                        JSON.parse(item.endProjectsInfo).map((item,i)=>{
                                                            return(
                                                                <div>
                                                                <Row>
                                                                    <Col span={8}>location : {item.location}</Col>
                                                                    <Col span={8}>project : {item.project}</Col>
                                                                    <Col span={8}>proxypath : {item.proxyPath}</Col>
                                                                </Row><br/>
                                                                </div>
                                                            )
                                                        })
                                                    }</Col>
                                                    <Col span={4}>
                                                        <Button  onClick={()=>this.setCookie(item.versionId)}>切换</Button>
                                                        <Button type="danger" onClick={()=>this.deleteVersion(item.versionId)}>删除</Button>
                                                        <Button type="primary" onClick={()=>this.edit(item.versionId)}>编辑</Button>
                                                    </Col>
                                                </Row>
                                                <br/>
                                            </div>
                                        );
                                    })
                                }

                            </div>
                        </Card>



                        <Modal style={{ width: 1000 }}
                            title="修改配置"
                            visible={this.state.editVisible}
                            onCancel={()=>this.setState({editVisible:false})}
                               onOk={()=>this.updateVersion()}
                        >
                            <div>
                                <Row ><span>版本号</span></Row><br/>
                                <Row ><Input placeholder="versionname" style={{ width: 400 }} value={this.state.version} disabled /></Row><br/>
                                <Row ><span>前端版本</span></Row><br/>
                                <Row ><Col span={4}><span>overseas</span></Col><Col><Select style={{ width: 400 }} onChange={(value)=>{this.setState({frontVersion:value})}}>
                                    {
                                        this.state.frontProjectList.map((item,i)=>{
                                            return  <Option value={item.projectName}>{item.projectName}</Option>
                                        })
                                    }
                                </Select></Col>
                                </Row><br/>
                                <Row >
                                    <Col span={4}><span> static</span></Col>
                                    <Col><Select style={{ width: 400 }} onChange={(value)=>{this.setState({frontStaticVersion:value})}}>
                                    {
                                        this.state.frontProjectList.map((item,i)=>{
                                            return  <Option value={item.projectName}>{item.projectName}</Option>
                                        })
                                    }
                                    </Select>
                                    </Col>
                                </Row><br/>
                                <span>后端规则</span><br/>
                                {this.state.endVersionConfig.map((config,i)=>{
                                    return (
                                        <Row >
                                            <Col span={6}>
                                                <Input placeholder="^ /trade" defaultValue={this.state.endVersionConfig[i].location} onChange={(e) => {
                                                var temp = this.state.endVersionConfig
                                                temp[i].location=e.target.value
                                                this.setState({endVersionConfig:temp})
                                            }}/>
                                            </Col>
                                            <Col span={12}>
                                            <Select style={{width:240}}
                                                onChange={(value)=>{
                                                    var temp = this.state.endVersionConfig
                                                    temp[i].project=value
                                                    this.setState({endVersionConfig:temp})
                                                }}>
                                                <Option value="">填写proxyPath</Option>
                                                {
                                                    this.state.projectList.map((item,i)=>{
                                                        return <Option value={item.projectName}>{item.projectName}</Option>
                                                    })
                                                }
                                            </Select>
                                            </Col>
                                            <Col span={6}>
                                            <Input  placeholder="http://121.199.170.10:80" onChange={(e) => {
                                                var temp = this.state.endVersionConfig
                                                temp[i].proxyPath=e.target.value
                                                this.setState({endVersionConfig:temp})
                                            }}/>
                                            </Col>
                                        </Row>
                                    )
                                })}
                                <Row>
                                    <Button size="large" onClick={()=>{
                                    var temp = this.state.endVersionConfig
                                    temp.push({})
                                        this.setState({endVersionConfig:temp})}}>+</Button>
                                </Row>
                            </div>
                        </Modal>


                        <Modal style={{ width: 1000 }}
                               title="发布状态"
                               visible={this.state.showPublishInfo}
                               onCancel={()=>this.setState({showPublishInfo:false})}
                               wrapClassName={'publishModal'} footer={null}
                        >
                            <iframe src={'/publish.jsp?projectName='+this.state.publishProjectName+'&v='+new Date().getTime()}></iframe>
                        </Modal>
                    </TabPane>
                </Tabs>
                </Spin>

            </div>
        );
    }
}

export default App;